<template>
  <div>
    <a-row type="flex" justify="space-between" align="middle">
      <div>
        <a-input
          class="search-input"
          v-model="model.ip"
          placeholder="请输入名称"
          allow-clear
          style="width: 190px"
        />

        <a-button
          type="primary"
          @click="
            current = 1;
            search();
          "
          >搜索
        </a-button>
      </div>
      <u-button icon="btn-add" class="mb-10" @click="add">新建</u-button>
    </a-row>
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
      rowKey="index"
      class="overflow-auto"
    >
      <span slot="action">
        <span class="button-text" style="margin: 0">编辑</span>
        <span style="margin: 0 4px">|</span>
        <span class="button-text" style="margin: 0">删除 </span>
      </span>
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
  </div>
</template>
<script>
const columns = [
  {
    title: "编号",
    key: "number",
    dataIndex: "number",
  },
  {
    title: "名称",
    key: "name",
    dataIndex: "name",
  },

  {
    title: "协议",
    key: "protocol",
    dataIndex: "protocol",
  },
  {
    title: "选项",
    key: "options",
    dataIndex: "options",
  },

  {
    title: "备注",
    key: "action",
  },
];
import Pagination from "@/components/Pagination.vue";
import { mockService } from "@/config/web/data/service";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      columns,
      loading: false,
      page: 10,
      current: 1,
      data: mockService,
      total: 10,
      model: {
        ip: "",
      },
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
    add() {},
    search() {},
  },
};
</script>
